<template>
  <div class="task-progress">
    <div class="layout" ref="layout">
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(item, index) in ambStateList"
          :key="index"
          :timestamp="item.timestamp"
          :color="item.color"
          :size="item.size"
          placement="top"
        >
          <span class="state-name" ref="stateName">{{item.content}}</span>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskProgress",
  data() {
    return {
      reverse: true,
    };
  },
  mounted() {
    let stateName = this.$refs.stateName;
    let len = stateName.length;
    let layout = this.$refs.layout;
    let height = (layout.clientHeight - 230) / len;
    stateName.forEach(item => {
      item.style.height = height + "px";
    });
  },
  computed: {
    ambStateList() {
      return this.$store.state.ambStateList;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.task-progress >>> .el-timeline-item__timestamp {
  color: #fff;
}
.task-progress {
  color: #fff;
  height: 92%;
  background: url("../assets/image/listbg.png");
  background-size: 100% 100%;
}
.layout {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10%;
}
.state-name {
  color: #fff;
  display: inline-block;
  /* height: 100px; */
}
</style>